
<meta charset="utf-8">
<link rel="stylesheet" href="../../assets/css/jquery-ui.min.css" />
<link rel="stylesheet" href="../../assets/css/datepicker.css" />
<link rel="stylesheet" href="../../assets/css/ui.jqgrid.css" />


<style>
.input-answer {
	color : black;
}

.title2 {
	font-size: 20px;
}

.title3 {
	font-size: 20px;
	cursor: pointer;
	color: red;
}
</style>

<!-- ajax layout which only needs content area -->
<div class="page-header">
	<h1>
		单词列表
	</h1>
</div><!-- /.page-header -->

<div class="row">
	<div class="col-xs-12">

		<div class="col-xs-12">
			<div id="articleInfo" class="title2"></div>
			<div id="mySenList" style="font-size: 20px;">
			</div>
			<div id="loading" style="font-size: 20px;display: none;">Loading....</div>
			<button id="loadMoreBtn"  class="btn btn-info" style="display: none;" type="button"  onclick="refreshWordList()">加载更多</button>
			
			标为完成: <input type="checkbox" onchange='toggleArticleStatus(this)' />
			
		</div>
		
		<table id="grid-table"></table>

		<div id="grid-pager"></div>

		<script type="text/javascript">
			var $path_base = "../..";//in Ace demo this will be used for editurl parameter
		</script>

		<!-- PAGE CONTENT ENDS -->
	</div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
	var scripts = [null,"../../assets/js/date-time/bootstrap-datepicker.min.js", null]
	var currPage = 1;
	var rowSize = 10;
	var currMaxRowIndex = 1;
	var articleId = "";
	var allLoadDone = false;
	ace.load_ajax_scripts(scripts, function() {
	  //inline scripts related to this page
		jQuery(function($) { 
			articleId = GetArgsFromHref(window.location.href, "articleId");
			articleId = articleId.replace("#page/words2", "");
			if(articleId == "") {
				return;
			} else {
				$
				.ajax({
					type : "POST",
					url : "../../getArticle",
					data : {
						articleId : articleId
					},
					async : true,
					dataType : "json",
					success : function(data) {
						var oneArticleHtml = "";
						oneArticleHtml += "<table   class='table table-striped table-bordered table-hover'>";
						var name = data.name;
						var url = data.url;
						var remark = data.remark;
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td colspan=2>素材";
						oneArticleHtml += " ID:" + data.id;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "</tr>";
						if(name != "") {
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>名称</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		name;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
						}
						if(url != "") {
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>来源</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		"<a target='_blank' href='" + url + "'>" + url.substr(0, 15) + "...</a>";
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "<tr>";
						}
						if(remark != "") {
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td>备注</td>";
							oneArticleHtml += "	  <td>";
							oneArticleHtml += 		remark;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "<tr>";
						}
						oneArticleHtml += "	  <td>类型</td>";
						oneArticleHtml += "	  <td>";
						oneArticleHtml += 		data.type;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "</tr>";
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td>共享</td>";
						oneArticleHtml += "	  <td>";
						oneArticleHtml += 		data.openFlag;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td>创建时间</td>";
						oneArticleHtml += "	  <td>";
						oneArticleHtml += 		data.lastUpt;
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "</tr>";
						oneArticleHtml += "<tr>";
						oneArticleHtml += "	  <td align='center' colspan=2>";
						oneArticleHtml += "      <button class='btn btn-info' type='button' onclick='showSenDetail(" + data.id +  ")' >句子</button>&nbsp;&nbsp;<button class='btn btn-info' type='button' onclick='deleteArticle(this, " + data.id  + ")' >删除</button>";
						oneArticleHtml += "	  </td>";
						oneArticleHtml += "</tr>";
						oneArticleHtml += "</table>";
						$("#articleInfo").html(oneArticleHtml);
					},
					error : function(data) {
						alert("submit result error, please contact administrator");
					}

				});
			}
			
			var bookMark = getBookMark(); 
			currPage = parseInt((parseInt(bookMark) - 1  + 10) / 10);
			currMaxRowIndex = (currPage - 1) * 10 + 1;
			if(currMaxRowIndex < 0) {
				currMaxRowIndex = 1;
			}
			if(currPage < 1) {
				currPage = 1;
			}
			if(currPage != 1) {
				bootbox.confirm("是否直接跳到上次书签(" + bookMark + ")所在的组位置？", function(result) {
					if(result) {
						initWork();
					} else {
						currPage = 1;
						currMaxRowIndex = 1;
						initWork();
					}
				});
			} else {
				initWork();
			}
		});
	});
	
	var loading = false;
	function initWork() {
		console.log("currPage:" + currPage + " currMaxRowIndex:" + currMaxRowIndex);
		refreshWordList();
		
		$(document).scrollTop(0);
		$(window).scroll(function(){
			  //console.log("$(document).scrollTop():" + $(document).scrollTop() + " $(document).height():" + $(document).height()
			//		   + " $(window).height():" + $(window).height());
			if(allLoadDone) {
				return;
			}
	        if($(document).scrollTop() >= $(document).height() - $(window).height()){
	        	if(!loading) {
		        	$("#loading").show();
		        	refreshWordList();
		        	$("#loading").hide();
	        	}
	        }
	      });	
	}
	
	
	function refreshWordList() {
		loading = true;
		console.log("refreshWordList articleId:" + articleId);
		$
				.ajax({
					type : "POST",
					url : "../../getWordList2",
					data : {
						page : currPage,
						rows : rowSize,
						articleId : articleId
					},
					async : true,
					dataType : "json",
					success : function(data) {
						if(currPage >= data.total) {
							$("#loadMoreBtn").attr("disabled", true);
							$("#loadMoreBtn").hide();
							allLoadDone = true;
						} else {
							currPage++;
						}
						console.log("data.length:" + data.rows.length);
						for (var i = 0; i < data.rows.length; i++) {
							var oneArticleHtml = "<div  style='border: 3px dashed #ccc;margin-top:5px;'   >";
							oneArticleHtml += "<table   class='table table-striped table-bordered table-hover'>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>" + (currMaxRowIndex)  + "/" + data.records + ":  " + data.rows[i].value + "</td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>";
							oneArticleHtml += "	    " + data.rows[i].pron + " " + data.rows[i].explain2;
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>";
							oneArticleHtml += "	    出现频次: " + data.rows[i].tempHit;
							
							for(var j = 0; j < data.rows[i].tempRank; j++) {
								oneArticleHtml += "<img width='20' height='20' src='../../assets/images/star_full.png' />";
							}
							
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>";
							oneArticleHtml += "     <b>收藏 &rarr;</b>  <span class='title3'  onclick='toggleForkWord(this, " + data.rows[i].id + ")' >";
							if(data.rows[i].tempInterest != '1') {
								oneArticleHtml += "      <i class='ace-icon glyphicon glyphicon-star-empty'></i>";
							} else {
								oneArticleHtml += "      <i class='ace-icon glyphicon glyphicon-star'></i>";
							}
							oneArticleHtml += "      </span>";
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							oneArticleHtml += "<tr>";
							oneArticleHtml += "	  <td colspan=2>";
							oneArticleHtml += '		<button  class="btn btn-info" type="button"  onclick="getSenList(this, ' + data.rows[i].id + ')">查看例句</button>';
							oneArticleHtml += '		&nbsp;&nbsp;书签: <input type="radio" onclick="setBookMark(' + currMaxRowIndex + ')" name="bookmarkRadio" id="bookmark_' + data.rows[i].id + '"/>';
							oneArticleHtml += '		<div   style="border: 2px dashed #ccc;margin-top:5px;" id=senDiv_' + data.rows[i].id + '></div>';
							oneArticleHtml += "	  </td>";
							oneArticleHtml += "</tr>";
							
							oneArticleHtml += "</table>";
							oneArticleHtml += "</div>";
							 
							//alert("oneArticleHtml:" + oneArticleHtml);
							$("#mySenList").append(oneArticleHtml);
							
							currMaxRowIndex++;
						}
						loading = false;
						
					},
					error : function(data) {
						alert("submit result error, please contact administrator");
					}

				});
	}
	
	
	function setBookMark(bookMarkIndex) {
		$.ajax({
			type : "POST",
			url : "../../setBookMark",
			data : {
				articleId : articleId,
				bookMarkIndex : bookMarkIndex,
				type : 'word'
			},
			async : true,
			dataType : "text",
			success : function(data) {
				
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	
	function getBookMark() {
		var bookMarkIndex = 0;
		$.ajax({
			type : "POST",
			url : "../../getBookMark",
			data : {
				articleId : articleId,
				type : 'word'
			},
			async : false,
			dataType : "text",
			success : function(data) {
				bookMarkIndex = data;
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}
		});
		return bookMarkIndex;
	}
	
	function toggleForkSen(spanObj, senId) {
		console.log("toggleForkSen senId:" + senId);
		var forkValue = $(spanObj).html().indexOf("glyphicon-star-empty") >= 0 ? 5 : 0; 
		if(forkValue == 0) {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star-empty'></i>");
		} else {
			$(spanObj).html("&nbsp;<i class='ace-icon glyphicon glyphicon-star'></i>");
		}					
		$.ajax({
			type : "POST",
			url : "../../toggleForkSen",
			data : {
				senId : senId,
				forkValue : forkValue
			},
			async : true,
			dataType : "json",
			success : function(data) {
				if(data == "0") {
					alert("please login first");
				}
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	

	function getSenList(obj, wordId) {
		$("#senDiv_" + wordId).html("");
		$.ajax({
			type : "POST",
			url : "../../getSenListForSubGrid2",
			data : {
				wordId : wordId,
				articleId : articleId
			},
			async : true,
			dataType : "json",
			success : function(data) {
				$("#senDiv_" + wordId).html("");
				if(data.rows.length == 0) {
					$("#senDiv_" + wordId).html("没有数据");
				}
				for (var i = 0; i < data.rows.length; i++) {
					var oneArticleHtml = "<div>";
					oneArticleHtml += "<b>" + (i + 1) + ".</b>" + data.rows[i].content + "&nbsp;<span class='title3'  onclick='toggleForkSen(this, " + data.rows[i].id + ")'>";
					if(data.rows[i].tempFlag != 'Yes') {
						oneArticleHtml += "      <i class='ace-icon glyphicon glyphicon-star-empty'></i>";
					} else {
						oneArticleHtml += "      <i class='ace-icon glyphicon glyphicon-star'></i>";
					}
					oneArticleHtml += "</span>";
					oneArticleHtml += "</div>";
					
					if(false) {
						oneArticleHtml += "	  <td colspan=2>";
						oneArticleHtml += "     <b>收藏 &rarr;</b>  <span class='title3'  onclick='toggleForkWord(this, " + data.rows[i].id + ")' >";
						oneArticleHtml += "      </span>";
					}
					 
					//alert("oneArticleHtml:" + oneArticleHtml);
					$("#senDiv_" + wordId).append(oneArticleHtml);
				}
			},
			error : function(data) {
				alert("submit result error, please contact administrator");
			}

		});
	}
	
	function toggleArticleStatus(cbObj) {
		console.log("cbObj.checked:" + cbObj.checked);
		$.ajax({
			type : "POST",
			url : "../../updateArticleStatus",
			data : {
				articleId : articleId,
				status : cbObj.checked
			},
			async : true,
			dataType : "json",
			success : function(data) {
				//rowData.tempRank = parseRank(newRank);
				//$("#grid-table").jqGrid('setRowData', id, rowData);
			},
			error : function(data) {
				alert("set error, please contact administrator");
			}

		});
	}
</script>
